<template>
  <div class="youjia-record-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#ffffff"
              status-color="#ffffff"
              :fixed="true">
      <template slot="slot">
        <div class="top-layout">
          <van-tabs class="tebs-layout" v-model="active" animated color="#64C367" :ellipsis="false"
                    :line-width="getAdaptiveSize(50)+'px'">
            <van-tab title="当日油价统计"></van-tab>
            <van-tab title="加油记录"></van-tab>
          </van-tabs>
          <div class="zw"></div>
          <div class="sort-text">排序</div>
        </div>
      </template>
    </snackbar>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="list-layout"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">

        <div class="item-layout" v-for="item in list">
          <template v-if="active == 0">

            <div class="item-model_1">
              <span class="car-number">桂B8989</span>
              <span class="date-label">加油日期:<p class="date">2021-5-31</p></span>
              <span class="xq-label">详情<img class="icon-go" src="@/assets/image/icon_right.png"></span>
            </div>

            <div class="item-model_2">
              <span class="text1">
                加油量<p class="text2">303</p>升
              </span>
              <span class="text1">
              油价<p class="text2">￥6.78</p>元/升
            </span>
            </div>

            <div class="item-model_3">
              <span class="text1">
                车型：勾车
              </span>
              <span class="text1">
                加油金额：<p class="text2">￥2054.34</p>
               </span>
            </div>
          </template>
          <template v-if="active == 1">
            <div class="item-model_1">
              <span class="car-number">桂B8989</span>
              <span class="date-label">加油日期:<p class="date">2021-5-31</p></span>
              <span class="xq-label">详情<img class="icon-go" src="@/assets/image/icon_right.png"></span>
            </div>
            <div class="item-model_4">
              <span class="text1">
                车型：勾车
              </span>
              <div class="text2-right">
                <span class="text2">
                  加油量：<p class="text3">303</p> 升
                </span>
                <span class="text2">
                  油价：<p class="text3">￥2.34</p> 元/升
                </span>
                <span class="text4">
                  车主：欧阳娜娜
                </span>
              </div>
            </div>

            <div class="line"></div>

            <div class="item-model_3">
              <span class="text1">
                操作员：谢同学
              </span>
              <span class="text1">
                加油金额：<p class="text2">￥2054.34</p>
               </span>
            </div>
          </template>
        </div>
      </van-list>
    </van-pull-refresh>

    <div class="bottom-layout">
      <span class="rests-btn">其他</span>
      <span class="add-btn">新增</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'record',
    data() {
      return {
        active: null,
        list: [{}, {}, {}, {}, {}, {}, {}],
        loading: false,
        finished: false,
        refreshing: false
      }
    },
    methods: {
      onRefresh() {
        this.loading = false
        this.refreshing = false
      },
      onLoad() {
        this.loading = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .youjia-record-layout {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    width: 100vw;
    background-color: #F6F6F6;

    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      background-color: white;

      .tebs-layout {
      }

      .zw {
        flex: 1;
      }

      .sort-text {
        width: 57px;
        font-size: 12px;
        color: #999999;
        margin-right: 10px;
        text-align: center;
      }

    }

    .list-layout {
      width: 100vw;
      min-height: 95vh;
      margin-top: 50px;
      padding-bottom: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .item-layout {
        width: 322px;
        background-color: #FFFFFF;
        border-radius: 6px;
        margin-top: 14px;
        padding-bottom: 10px;

        .item-model_1 {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-top: 17px;

          margin-left: 11px;
          margin-right: 13px;

          .car-number {
            font-size: 14px;
            font-weight: 500;
            color: #000000;
            letter-spacing: 2px;

            background: rgba(100, 195, 103, 0.3);
            border-radius: 4px;
            padding: 2px 10px;
          }

          .date-label {
            font-size: 13px;
            color: #B4B4B4;
            margin-left: 9px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            .date {
              font-size: 14px;
              color: #333333;
              margin-left: 7px;
            }
          }

          .xq-label {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-left: 20px;
            font-size: 14px;
            color: #333333;

            .icon-go {
              width: 11px;
              height: 11px;
            }
          }
        }

        .item-model_2 {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          font-size: 13px;
          color: #B4B4B4;
          margin-top: 12px;
          margin-left: 38px;
          margin-right: 16px;


          .text1 {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            .text2 {
              margin-left: 10px;
              margin-right: 5px;
              font-size: 19px;
              font-weight: 400;
              color: #000000;
            }
          }
        }

        .item-model_3 {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-top: 12px;

          margin-left: 13px;
          margin-right: 21px;

          .text1 {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            color: #B4B4B4;

            .text2 {
              font-size: 19px;
              font-weight: 400;
              color: #FA6400;
            }
          }
        }

        .item-model_4 {
          display: flex;
          flex-direction: row;
          align-items: self-start;
          justify-content: space-between;
          margin-left: 21px;
          margin-right: 28px;
          margin-top: 24px;

          .text1 {
            font-size: 13px;
            color: #B4B4B4;
          }

          .text2-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .text2 {
              font-size: 13px;
              color: #B4B4B4;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              flex-direction: row;
              margin-bottom: 6px;
            }

            .text3 {
              margin-left: 10px;
              margin-right: 10px;
              font-size: 19px;
              color: #000000;
            }

            .text4 {
              font-size: 13px;
              color: #B4B4B4;
              margin-top: 4px;
            }
          }
        }

        .line {
          height: 1px;
          margin-top: 9px;
          background-color: rgba(181, 181, 181, 0.5);
          margin-left: 10px;
          margin-right: 22px;
        }
      }
    }

    .bottom-layout {
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 47px;
      display: flex;
      flex-direction: row;


      .rests-btn {
        width: 121px;
        height: 47px;
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(221, 220, 220, 0.5);
        font-size: 14px;
        color: #3A3A3A;
      }

      .add-btn {
        flex: 1;
        height: 47px;
        background: linear-gradient(221deg, #7ED785 0%, #64C367 100%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        font-size: 14px;
        color: #FFFFFF;
      }
    }
  }
</style>
